<template>
  <div>
    <!-- 面包屑导航条 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/toOneList' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据中心</el-breadcrumb-item>
      <el-breadcrumb-item>原材料管理</el-breadcrumb-item>
      <el-breadcrumb-item>工序添加</el-breadcrumb-item>
    </el-breadcrumb>
      <!--标题-->
      <el-row class="box2">
        <h1 class="title">添加界面</h1>
      </el-row>
      <!--中间间隔-->
      <el-row class="box"></el-row>
    <!--添加界面-->
    <el-card class="box-card">
      <el-form :model="addForm" status-icon :rules="rules" >
        <!---------------------------------------------------------->
        <el-row type="flex" class="row-bg" justify="space-around">
          <el-col :span="9">
            <el-form-item label="工序编号" label-width="90px">
              <el-input v-model="addForm.code" disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="2"></el-col>
          <el-col :span="9">
            <el-form-item label="工序名称" prop="name" label-width="90px">
              <el-input v-model="addForm.name" placeholder="请输入工序名"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!---------------------------------------------------------->
        <el-row type="flex" class="row-bg" justify="space-around">
          <el-col :span="9">
            <el-form-item label="收费方式" label-width="90px">
              <el-select v-model="addForm.ctype" placeholder="请选择活动区域">
                <el-option v-for="it in tlist"
                  :label="it.tname"
                  :key="it.cType"
                  :value="it.cType"
                  ></el-option>
                <el-option label="按时间（分钟）" :value="0"></el-option>
                <el-option label="按面积（m^2）" :value="1"></el-option>
                <el-option label="按重量（kg）" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="2"></el-col>
          <el-col :span="9">
            <el-form-item label="单价" prop="price" label-width="90px">
              <el-input v-model.number="addForm.price" placeholder="请输入单价"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="row-bg" justify="space-around">
          <el-col :span="9">
            <el-form-item label="准备工时单价" prop="prePrice" label-width="100px">
              <el-input v-model.number="addForm.prePrice" placeholder="请输入准备工时单价"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="90px">
            </el-form-item>
          </el-col>
        </el-row>
        <el-row type="flex" class="row-bg" justify="space-around">
          <el-col :span="24">
            <el-form-item label="工序介绍" label-width="110px">
              <el-input type="textarea" :rows="4" placeholder="请输入工序介绍" v-model="addForm.remarks"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-button @click="save()" plain type="info" >添加</el-button>
        <el-button @click="reset()" type="primary">重置</el-button>
        <el-button @click="goback()" type="primary">返回</el-button>
      </el-form>
    </el-card>
  </div>
</template>

<script>
    export default {
        name: "proAdd",
      data(){
        return{
          addForm:{},
          rules: {
            name: [
              { required: true, message: "工序名称不能为空", trigger: 'blur' }
            ],
            price: [
              { required: true, message: "工序单价不为空", trigger: 'blur' },
              { type: 'number', message: "工序单价必须为数字类型", trigger: 'blur' }
            ],
            prePrice: [
              { required: true, message: "准备工时单价不为空", trigger: 'blur' },
              { type: 'number', message: "准备工时单价必须为数字类型", trigger: 'blur' }
            ]
          }
        }
      },
      methods:{
        goback(){//返回
          this.$router.push('/process');
        },
        getcode(){//获取编号
          this.addForm.code=Math.floor(Math.random()*1000000);
        },
        save() {//工序添加
          debugger
          this.$http.post("/pro/save",this.addForm).then((res) => {
            debugger
            if (res.data.success) {
              this.$message({
                message:res.data.message,
                type:"success"
              })
              this.$router.push('/process')
            } else {
              this.$message.error(res.data.message);
            }
          });
        },
        reset(){//重置
          this.addForm={};
        },
      },
      mounted() {
        this.getcode();
      }
    }
</script>

<style scoped>
  .row-bg {/*添加界面布局的样式*/
    padding: 10px 0;
  }
  .box2{/*添加界面的样式*/
    height: 80px;
    border-radius: 40px;
  }
  .box-card{/*列表的样式*/
    border-radius: 30px;
  }
  .box{/*中间的间隔*/
    height: 20px;
    background-color: #eaedf1;
  }
  .title{
    line-height:2.3px;
    text-align: center;
  }
</style>
